<template>
	<!-- <CustomTabBar /> -->
	<view style="padding-bottom:3rem;">
		<!-- 顶部图片 logo 搜索框 -->
		<view>
			<image src="/static/img/p1.jpg" class="bg-img" alt="image"></image>
			<image src="/static/img/mask.png" class="mask" alt="mask"></image>
			<image src="/static/logo/logo.png" class="logo" alt="logo"></image>
			<view class="search">
				<up-search :placeholder="$t('index.search.placeholder')" v-model="keyword" :show-action="false"
					bgColor="rgba(187,187,187,0.3)" borderColor="rgba(187,187,187,0.3)" placeholder-color="#FFFFFF"
					search-icon-color="#FFFFFF" height="1.7rem" :clearabled="false"></up-search>
				<image src="/static/icon/camera.png" class="icon-camera" alt="icon"></image>
			</view>
		</view>
		<!-- 中间板块 -->
		<view class="card-show">
			<image src="/static/img/p2.jpg" class="card-img" alt="image"></image>
			<view class="card-dot" style="right: 0.45rem;top: 0.3rem;"></view>
			<view class="card-dot" style="left:0.45rem;bottom:0.3rem;"></view>
		</view>
		<!-- 滚动面板 -->
		<view class="slider" style="--width: 7.06rem;--height: 6.75rem;--quantity: 6;">
			<scroll-view scroll-x="true" :show-scrollbar="false" style="width: 100%;height:7.2rem">
				<view id="index" class="slider-list" v-for="(item, index) in images" :key="index">
					<view class="slider-list-item" :style="`--position: ${index + 1}`">
						<view style="width: 100%;height: 100%;">
							<image :src="item.image" alt="轮播图" loading="lazy" class="slider-image" mode="scaleToFill"
								@touchstart="handleTouchStart()" @touchend="handleTouchend()" />
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	// import CustomTabBar from '@/components/CustomTabBar.vue';
	import { ref, onMounted, onUnmounted, computed } from 'vue';
	interface swpierType {
		image : string
	}

	const keyword = ref<string>('');
	const images = ref<Array<swpierType>>([
		{ image: '/static/img/slider1.jpg' },
		{ image: '/static/img/slider2.jpg' },
		{ image: '/static/img/slider3.jpg' },
		{ image: '/static/img/slider4.jpg' },
		{ image: '/static/img/slider5.jpg' },
		{ image: '/static/img/slider6.jpg' },
	]);

	// 组件挂载时初始化滚动
	onMounted(() => {
		// 等待DOM渲染完成后初始化
	});

	// 组件卸载时清除定时器
	onUnmounted(() => {
		
	});

	// 滚动事件处理函数
	const scroll = (event : any) => {
	};

	// 暂停滚动
	const pauseScroll = () => {
		// 直接获取所有 slider-list-item 元素
		const sliderItems = document.querySelectorAll('.slider-list-item');
		sliderItems.forEach((item: Element) => {
			const htmlItem = item as HTMLElement;
			htmlItem.style.animationPlayState = 'paused';
		});
	};

	// 恢复滚动
	const resumeScroll = () => {
		// 直接获取所有 slider-list-item 元素
		const sliderItems = document.querySelectorAll('.slider-list-item');
		sliderItems.forEach((item: Element) => {
			const htmlItem = item as HTMLElement;
			htmlItem.style.animationPlayState = 'running';
		});
	};

	// 触摸事件处理函数
	const handleTouchStart = () => {
		pauseScroll();
	};
	const handleTouchend = () => {
		resumeScroll();
	};
</script>

<style scoped lang="scss">
	.bg-img {
		min-width: 23.46rem;
		width: 100%;
		height: 31rem;
	}

	.mask {
		width: 100%;
		min-width: 24.56rem;
		position: absolute;
		top: 0;
		z-index: 2;
	}

	.logo {
		position: absolute;
		top: 0;
		left: 0.43rem;
		width: 8.56rem;
		height: 2.63rem;
		z-index: 3;
	}

	.search {
		width: 12.94rem;
		height: 1.94rem;
		position: absolute;
		top: 0.3rem;
		left: 10rem;
		z-index: 3;
	}

	.icon-camera {
		position: absolute;
		top: 0.2rem;
		right: 0.7rem;
		width: 1.5rem;
		height: 1.5rem;
	}

	.card-show {
		position: relative;
		margin: 0.4rem auto;
		width: 93%;
		height: 4.75rem;
		border-radius: 0.63rem;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(0, 0, 0, 0.4);
		border: 0.06rem solid rgba(187, 187, 187, 1);
	}

	.card-img {
		width: 9.56rem;
		height: 4.75rem;
		border-radius: 0.63rem 0rem 0rem 0.63rem;
	}

	.card-dot {
		position: absolute;
		width: 0.63rem;
		height: 0.63rem;
		border-radius: 0.5rem;
		background-color: rgba(93, 93, 93, 1);
		border: 0.06rem solid rgba(187, 187, 187, 1);
	}

	.slider {
		width: 100%;
		height: var(--height);
		padding: 1rem 0;
		overflow: hidden;
	}

	.slider-list {
		display: flex;
		width: 100%;
		min-width: calc(var(--width) * var(--quantity));
		position: relative;
	}

	.slider-list-item {
		width: var(--width);
		height: var(--height);
		position: absolute;
		left: 100%;
		animation: autoRun 10s linear infinite;
		animation-delay: calc((10s / var(--quantity)) * (var(--position) - 1) - 10s) !important;
		
		/* 添加过渡效果，使暂停更平滑*/
		transition: animation-play-state 0.3s ease;
	}

	.slider-image {
		width: 100%;
		height: 100%;
		border-radius: 0.63rem;
		filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.4));
	}

	.card {
		width: 100%;
		height: 100%;
	}

	@keyframes autoRun {
		from {
			left: 100%;
		}

		to {
			left: calc(var(--width) * -1);
		}
	}
	/*悬停时暂停动画*/
	/* .slider:hover .slider-list-item {
		animation-play-state: paused !important;
	}*/

	.slider[reverse="true"] .slider-list-item {
		animation: reversePlay 10s linear infinite;
	}

	@keyframes reversePlay {
		from {
			left: calc(var(--width) * -1);
		}

		to {
			left: 100%;
		}
	}
</style>